<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchList">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="活动ID:">
              <a-input type="number" oninput="queryParam.actId=queryParam.actId.replace(/\D/g,'');" pattern="[0-9]*" v-model="queryParam.actId" placeholder="活动ID" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="活动名称:">
              <a-input v-model="queryParam.activityName" placeholder="活动名称" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="券名称:">
              <a-input v-model="queryParam.voucherName" placeholder="券名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="券模板ID:">
              <a-input type="number" v-model="queryParam.awardId" placeholder="券ID" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="活动状态:">
              <a-select v-model="queryParam.activityStatus" mode="multiple" autoClearSearchValue show-search allowClear placeholder="请选择" style="width: 100%">
                <a-select-option v-for="(item, index) in statusList" :key="index" :value="item.name">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-button type="primary" @click="searchList">搜索</a-button>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="6" :sm="12">
            <a-button type="primary"><router-link :to="`/marketingCenter/storeCoupon/detail/${'add'}`">创建</router-link></a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table style="margin-top:20px;" ref="table" :rowKey="record => record.id" :columns="columns" :data="loadData" :scroll="{ x: 1300 }" :pagination="paginationProps">
      <span slot="voucherPackNum" slot-scope="text, record">
        <div @click="showVou(record)">
          <template>{{ record.voucherPackNum }}</template>
        </div>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <template v-if="record.activityStatus == '未上架' || record.activityStatus == '已下架'">
            <router-link :to="`/marketingCenter/storeCoupon/detail/${record.id}`"> 编辑 </router-link>
            <a-divider type="vertical" />
          </template>
          <template v-if="record.activityStatus == '已上架'">
            <a @click="editRow(record, 1, true)">置顶</a>
            <a-divider type="vertical" />
          </template>
          <template v-if="record.isTop == 1">
            <a @click="editRow(record, 1, false)">取消置顶</a>
            <a-divider type="vertical" />
          </template>
          <template v-if="record.activityStatus == '未上架' || record.activityStatus == '已下架'">
            <a-popconfirm title="确定要上架吗?" ok-text="Yes" cancel-text="No" @confirm="editRow(record, 2, true)">
              <a>上架</a>
            </a-popconfirm>
            <a-divider type="vertical" />
          </template>
          <template v-if="record.activityStatus == '已上架'">
            <a-popconfirm title="确定要下架吗?" ok-text="Yes" cancel-text="No" @confirm="editRow(record, 2, false)">
              <a>下架</a>
            </a-popconfirm>
            <a-divider type="vertical" />
          </template>
          <a-popconfirm title="确定要删除吗?" ok-text="Yes" cancel-text="No" @confirm="editRow(record, 3, true)">
            <a>删除</a>
          </a-popconfirm>
          
          <a-divider type="vertical" />
          <!-- <a>复制</a> -->
          <router-link :to="`/marketingCenter/storeCoupon/detail/${'add-' + record.id}`"> 复制 </router-link>
          <a-divider type="vertical" />
          <a @click="handleLog(record.id)">操作日志</a>
        </template>
      </span>
    </s-table>
    <a-modal :visible="vouVisible" @cancel="vouVisible = false" title="券包明细列表" :footer="null" :width="800">
      <a-table :dataSource="vouDataSource" :columns="vouColumns" :pagination="paginationProps">
        <span slot="type" slot-scope="text, record">
          <template>{{ record.type == 'VOU3' ? '满减券' : '折扣券' }}</template>
        </span>
      </a-table>
    </a-modal>
    <!-- 删除 -->
    <a-modal :visible="visible" @ok="deleteOk" okText="删除" :width="400">
      <div class="edit-activity">确认要删除该条活动吗？</div>
    </a-modal>
    <Log :logVisible.sync="logVisible" ref="log"></Log>
  </a-card>
</template>
<script>
import Log from '@/views/marketingCenter/storeCoupon/components/log'
import { activityList, voucherList, editActive } from '@/api/marketingCenter/storeCoupon.js'
const columns = [
  {
    title: '活动ID',
    dataIndex: 'id',
    align: 'left',
    width: 100,
  },
  {
    title: '活动名称',
    dataIndex: 'activityName',
    align: 'left',
    width: 200,
    customRender: function(text){
      return text.length > 10?text.replace(text.substring(10),'...'):text
    }
  },
  {
    title: '券数量',
    dataIndex: 'voucherPackNum',
    align: 'left',
    width: 100,
    scopedSlots: { customRender: 'voucherPackNum' }
  },
  {
    title: '活动开始时间',
    dataIndex: 'startTime',
    align: 'left',
    width: 200
  },
  {
    title: '活动结束时间',
    dataIndex: 'endTime',
    align: 'left',
    width: 200
  },
  {
    title: '活动状态',
    dataIndex: 'activityStatus',
    align: 'left',
    width: 100,
  },
  {
    title: '创建人',
    dataIndex: 'creator',
    align: 'left',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'left',
    width: 200
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '400px',
    align: 'left',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
const vouColumns = [
  {
    title: '券模板ID',
    dataIndex: 'awardId',
    align: 'left'
  },
  {
    title: '券名称',
    dataIndex: 'voucherName',
    align: 'left'
  },
  {
    title: '面值',
    dataIndex: 'amountLimit',
    align: 'left'
  },
  {
    title: '券类型',
    dataIndex: 'type',
    align: 'left'
  },
  {
    title: '总库存',
    dataIndex: 'voucherStock',
    align: 'left'
  },
  {
    title: '剩余库存',
    dataIndex: 'surplusStock',
    align: 'left'
  }
]
import { STable } from '@views/box/components'
import { promote } from '@/api/marketingCenter/passenger'
export default {
  components: {
    STable,
    Log
  },
  data() {
    return {
      vouVisible: false,
      vouColumns,
      vouDataSource: [],
      columns,
      logVisible: false,
      visible: false,
      pushVisible: false,
      statusList: [{ name: '未上架' }, { name: '已上架' }, { name: '已下架' }, { name: '已结束' }],
      paginationProps: {
        pageSize: 10,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      queryParam: {
        actId: '',
        activityName: '',
        voucherName: '',
        awardId: '',
        activityStatus: []
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('table----')
        const obj = this.queryParam
        const queryParam = JSON.parse(JSON.stringify(obj))
        queryParam.activityStatus = queryParam.activityStatus.join(',')
        const data = {
          ...queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }

        return activityList(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }

            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 20
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created(){
    sessionStorage.removeItem('vouOriginData')
  },
  methods: {
    // 券列表
    async showVou(val) {
      this.vouVisible = true
      const obj = {
        size: 10,
        current: 1,
        actId: val.id
      }
      const res = await voucherList(obj)
      if (res.code == 200) {
        this.vouDataSource = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    handleLog(id) {
      this.$refs.log.getLog(id, 'parent')
      this.logVisible = true
    },
    // 下架
    async editRow(record, type, value) {
      const obj = {
        operatorDto: {
          configId: record.id,
          operatorId: this.$store.getters.userInfo.id,
          operatorName: this.$store.getters.userInfo.realname
        },
        actId: record.id,
        operateType: type,
        operateValue: value
      }
      const res = await editActive(obj)
      if (res.code == 200) {
        console.log('=editRow==')
        this.$refs.table.refresh(true)
      } else {
        this.$message.error(res.msg)
      }
    },
    callback() {
      this.$refs.table.refresh()
    },
    // 搜索
    searchList() {
      this.$refs.table.refresh(true)
    },
    deleteOk() {
      // operation(this.deleid, 2).then(res => {
      //   if (res.code === 200) {
      //     this.$message.success('删除成功成功!')
      //     this.visible = false
      //     this.$refs.table.refresh()
      //   } else {
      //     this.$message.error(res.data)
      //   }
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.edit-activity {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input {
  -moz-appearance: textfield;
}
</style>
